
<template>
  <div class="group_wrap">
    <h4>报修信息</h4>
    <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false">
      <template #bodyCell="{ column, index, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
            <span>
              <a @click="deteleItem(index)">删除</a>
            </span>
          </div>
        </template>
        <div v-else>
          <a-input v-if="column.type === 'disable'" v-model:value="dataSource[index][column.dataIndex]" disabled
            placeholder="自动填充" />
          <a-input v-else v-model:value="dataSource[index][column.dataIndex]" />
        </div>
      </template>
    </a-table>

    <div class="group_btns">
      <a-button type="primary" @click="submit()">提交</a-button>
    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { formInfoStore } from '@/store/modules/form';
import { Subscription } from 'rxjs';
import { DYNAMICLOCALICONS, SELECTSERVE } from '@/mixins/subject/subject-types';
import { filter } from 'rxjs/operators';
import router from '@/router';
const formStore = formInfoStore();

let $subscribeSub: Subscription;
const { proxy }: any = getCurrentInstance()

let dataSource: any = reactive([
  {
    name1: '',
    name2: '',
    name3: '',
    name4: '',
    name5: '',
    name6: '',
  }
]);
const columns = [
  {
    title: '行号',
    dataIndex: 'name1',

  },
  {
    title: '品牌',
    dataIndex: 'name2',
  },
  {
    title: '类型',
    dataIndex: 'name3',
  },
  {
    title: '备件名称',
    dataIndex: 'name4',
  },
  {
    title: '备件编码',
    dataIndex: 'name5',
    type: 'disable',
  },
  {
    title: '规格型号',
    dataIndex: 'name6',
    type: 'disable',
  },
  {
    title: '申领数量',
    dataIndex: 'name7',
  },
  {
    title: '单位',
    dataIndex: 'name8',
    type: 'disable',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '100px'
  },
];

//表单
const dynamicForm1 = ref();

//删除
const deteleItem = (index) => {

  dataSource.splice(index, 1)
}

//新增
const addItem = () => {
  dataSource.push({
    name1: '',
    name2: '',
    name3: '',
    name4: '',
    name5: '',
    name6: '',
  })
}

//提交
const submit = () => {

}


//监听动态表单数据完成
const subWatch = () => {
  $subscribeSub = proxy.$NotificationPubSub
    .getParams()
    .pipe(filter((res: any) => res !== 0))
    .subscribe((item: any) => {
      try {
        if (item.key === DYNAMICLOCALICONS) {
          //列表数据
          console.log('列表数据来了', item);
          dataSource = item.state.selected;
        }
      } catch (error) {

      }
    });
}

const init = () => {
  if (router.currentRoute.value.query.id) {
    console.log('获取页面id', router.currentRoute.value.query);
  }
}

onMounted(() => {
  init();
  subWatch();
})


//解绑
onUnmounted(() => {
  if ($subscribeSub != undefined) {
    $subscribeSub.unsubscribe();
  }
  proxy.$NotificationPubSub.clearParams();
  // store.dispatch(`info/${types.REMOVEINFO}`);
})

//插槽字段

//wrod预览

</script>

<style lang="less" scoped>
:deep(.table5) {
  .ant-table-tbody>tr>td {
    border: none
  }
}

.group_wrap {
  padding: 24px;

  h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .dynamic_table_wrapper {
    padding-bottom: 0px;
  }

  .group_conditions {
    span {
      color: #005AEA;
    }
  }

  .group_add {
    border: 1px dashed #ddd;
    line-height: 36px;
    text-align: center;
    margin: 10px 0px;
    color: #ddd;
    cursor: pointer;
    margin-bottom: 50px;

    &:hover {
      color: #005AEA;
      border-color: #005AEA;
    }
  }

  .group_btns {
    text-align: right;
    margin-top: 20px;

    .ant-btn {
      color: #fff;
    }
  }
}</style>
